<template>
  <div class="el-transfer">
    <div class="el-transfer-panel" style="width: 230px;">
      <el-table
        ref="multipleTable"
        :data="dataListLeft"
        height="300"
        border
        tooltip-effect="dark"
        current-row-key="id"
        style="width: 100%"
        @selection-change="removeDataLeftChange">
        <el-table-column
          type="selection"
          style="width: 10%">
        </el-table-column>
        <el-table-column
          :label="labelOne[0]"
          :prop=propOne[0]
          style="width: 40%">
        </el-table-column>
        <el-table-column
          :label="labelOne[1]"
          :prop=propOne[1]
          style="width: 40%">
        </el-table-column>
      </el-table>
    </div>
    <div class="el-transfer__buttons">
      <div><el-button type="primary" @click="addLeft()" :disabled="removeDataRight.length == 0"><i class="el-icon-arrow-left el-icon--left"></i></el-button></div>
      <div><el-button type="primary" @click="addRight()" :disabled="removeDataLeft.length == 0"><i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
    </div>
    <div class="el-transfer-panel" style="width: 230px;">
      <el-table
        ref="multipleTableRight"
        :data="dataListRight"
        height="300"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="removeDataRightChange">
        <el-table-column
          type="selection"
          style="width: 10%">
        </el-table-column>
        <el-table-column
          :prop=propTwo[0]
          :label="labelTwo[0]"
          style="width: 40%">
        </el-table-column>
        <el-table-column
          :prop=propTwo[1]
          :label="labelTwo[1]"
          style="width: 40%">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ymyTransfer',
    props: ['data','labelOne','labelTwo','propOne','propTwo'],
    data() {
      return {
        dataListLeft: [],
        removeDataLeft: [],
        dataListRight: [],
        removeDataRight: []
      };
    },
    mounted(){
        console.log(this.labelLeft);
      this.dataListLeft = this.data;
    },
    methods: {
      removeDataLeftChange(val) {
        this.removeDataLeft = val;
      },

      removeDataRightChange(val) {
        this.removeDataRight = val;
      },

      /**
       * 《-- 添加右侧节点
       **/
      addLeft() {
        const _this = this;

        //过滤节点
        _this.dataListRight = _this.dataListRight.filter(item => { return !_this.removeDataRight.includes(item); });

        //添加节点
        if(_this.dataListLeft.length > 0){
          for(let i = 0; i < _this.removeDataRight.length; i++){
            _this.dataListLeft.push(_this.removeDataRight[i]);
          }
        }else{
          _this.dataListLeft = _this.removeDataRight;
        }

        _this.removeDataRight = [];

        this.$emit('selectednode',  _this.dataListRight);
      },

      /**
        * --》 添加左侧节点
       **/
      addRight() {
        const _this = this;

        //过滤节点
        _this.dataListLeft = _this.dataListLeft.filter(item => { return !_this.removeDataLeft.includes(item); });

        //添加节点
        if(_this.dataListRight.length > 0){
          for(let i = 0; i < _this.removeDataLeft.length; i++){
            _this.dataListRight.push(_this.removeDataLeft[i]);
          }
        }else{
          _this.dataListRight = _this.removeDataLeft;
        }

        _this.removeDataLeft = [];

        this.$emit('selectednode',  _this.dataListRight);
      }
    }
  };

</script>

<style lang="scss">

</style>
